{% if isFramework("react") %}
Not all column groups can open and close, so you should display open / close features accordingly. To check if a column group should have open / close functionality, check the `isExpandable()` method on the column group.
{% /if %}

{% if isFramework("react") %}
```js
const showExpandableIcons = props.columnGroup.isExpandable()
```
{% /if %}

{% if isFramework("react") %}
To check if a column group is open or closed, check the `isExpanded()` method on the column group.
{% /if %}

{% if isFramework("react") %}
```js
const groupIsOpen = props.columnGroup.isExpanded();
```
{% /if %}

{% if isFramework("react") %}
To open / close a column group, use the `props.setExpanded(boolean)` method.
{% /if %}

{% if isFramework("react") %}
```js
// this code toggles the expanded state
const oldValue = props.columnGroup.isExpanded();
const newValue = !oldValue;
props.setExpanded(newValue);
```
{% /if %}

{% if isFramework("react") %}
To know if a group is expanded or collapsed, listen for the `expandedChanged` event on the column group.
{% /if %}

{% if isFramework("react") %}
```js
// get a reference to the original column group
const columnGroup = props.columnGroup.getProvidedColumnGroup();
// create listener
const listener = () => { console.log('group was opened or closed'); };
// add listener
columnGroup.addEventListener('expandedChanged', listener);

// don't forget to remove the listener in your destroy method
columnGroup.removeEventListener('expandedChanged', listener);
```
{% /if %}
